<template>
  <div class="box">
    <div class="box_i">
      <transition name="fade">
        <i
          @click="changeShow"
          v-show="!handleShow"
          style="font-size: 20px;"
          class="el-icon-s-unfold hover"
        ></i>
      </transition>
      <transition name="fade">
        <img
          class="but hover"
          v-show="handleShow"
          @click="$emit('close')"
          src="../../image/frame.png"
        >
      </transition>
    </div>
    <div>
      <img
        @click="cutFull"
        v-if="device === 'desktop'"
        class="but hover"
        style="margin-right: 10px;"
        src="../../image/fullCut.png"
      >
      <img
        @click="$emit('close')"
        class="but hover"
        src="../../image/close.png"
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "AiBox",
  computed: {
    // left 是否折叠
    handleShow() {
      return this.$store.state.aiChat.handleShow;
    },
    // 全屏
    fullscreen() {
      return this.$store.state.aiChat.fullscreen;
    },
    device() {
      return this.$store.getters.device;
    },
  },
  methods: {
    changeShow() {
      this.$store.dispatch("aiChat/setStatus", true);
    },
    cutFull() {
      this.$store.commit("aiChat/SET_FULLSCREEN", !this.fullscreen);
      if (this.fullscreen) {
        this.changeShow();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 12px 15px 8px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.but {
  width: 30px;
  height: 30px;
}
</style>
